var data = [
  {
    id: 1,
    receiptNum: 20220703001,
    fileNum: 012022000001,
    boxNum: " 1 - 1 - 1 - 001",
    user: "王智鹏",
    time: "2022-8-23 10:25:42",
  },
  {
    id: 2,
    receiptNum: 20220703002,
    fileNum: 012022000002,
    boxNum: " 1 - 1 - 1 - 002",
    user: "文崝",
    time: "2022-8-24 10:25:52",
  },
  {
    id: 3,
    receiptNum: 20220703003,
    fileNum: 012022000003,
    boxNum: " 1 - 1 - 1 - 003",
    user: "曾岚",
    time: "2022-8-25 10:25:14",
  },
  {
    id: 4,
    receiptNum: 20220703004,
    fileNum: 012022000004,
    boxNum: " 1 - 1 - 1 - 004",
    user: "王国龙",
    time: "2022-8-21 10:25:12",
  },
  {
    id: 5,
    receiptNum: 20220703005,
    fileNum: 012022000005,
    boxNum: "1 - 1 - 1 - 005",
    user: "王培",
    time: "2022-8-22 10:25:15",
  },
  {
    id: 6,
    receiptNum: 20220703006,
    fileNum: 012022000006,
    boxNum: " 1 - 1 - 1 - 006",
    user: "郑姚",
    time: "2022-8-22 10:25:06",
  },
  {
    id: 7,
    receiptNum: 20220703007,
    fileNum: 012022000007,
    boxNum: " 1 - 1 - 1 - 007",
    user: "罗忠",
    time: "2022-8-21 10:25:07",
  },
  {
    id: 8,
    receiptNum: 20220703006,
    fileNum: 01202200007,
    boxNum: " 1 - 1 - 1 - 008",
    user: "郑姚",
    time: "2022-8-23 10:25:06",
  },
  {
    id: 9,
    receiptNum: 20220703009,
    fileNum: 012022001,
    boxNum: " 1 - 1 - 1 - 009",
    user: "崔强",
    time: "2022-8-25 10:25:06",
  },
  {
    id: 10,
    receiptNum: 202207030010,
    fileNum: 012022011,
    boxNum: " 1 - 1 - 1 - 010",
    user: "刘帅",
    time: "2022-8-24 09:25:06",
  },
];

//分页
var page = 1;
//每页个数
var count = 8;
//获取tbody
var oTBody = document.querySelector("tbody");
//获取分页的容器
var oPagination = document.querySelector(".pagination");
//获取上下页按钮
var oPrevBtn = document.querySelector(".prev");
var oNextBtn = document.querySelector(".next");
//获取删除按钮
var oDelBtn = document.querySelector(".delBtn");
//获取添加保存的按钮
var oAddSaveBtn = document.querySelector(".addSaveBtn");

//获取搜索按钮
var oSearchBtn = document.querySelector(".searchBtn");
//获取搜索栏
var oSearchInp = document.querySelector(".searchInp");

// console.log(data.slice((page - 1) * count, page * count));
//搜索事件
oSearchBtn.addEventListener("click", searchFn);
function searchFn() {
  render();
}
//页面初始化渲染页面
function render() {
  //搜索
  var data1 = [];
  var str1 = oSearchInp.value;
  // console.log(str1);
  if (str1.trim() == "") {
    data1 = data;
    console.log(data, data1);
  } else {
    for (var i = 0; i < data.length; i++) {
      if (data[i].receiptNum == str1) {
        data1.push(data[i]);
      }
      // console.log(data1);
      // alert(1);
    }
  }
  console.log(data1);
  oTBody.innerHTML = "";
  var renderArr = data1.slice((page - 1) * count, page * count);
  for (var i = 0; i < renderArr.length; i++) {
    var oTr = document.createElement("tr");
    oTr.innerHTML = `
      <td><input class="c2" type="checkbox" /></td>
        <td>${renderArr[i].id}</td>
        <td>${renderArr[i].receiptNum}</td>
        <td>${renderArr[i].fileNum}</td>
        <td>${renderArr[i].boxNum}</td>
        <td>${renderArr[i].user}</td>
        <td>${renderArr[i].time}</td>
    `;
    oTBody.appendChild(oTr);
  }
  //渲染页码
  var aPageBtn = document.querySelectorAll(".pageBtn");
  for (var i = 0; i < aPageBtn.length; i++) {
    oPagination.removeChild(aPageBtn[i].parentNode);
  }
  for (var i = 1; i <= Math.ceil(data1.length / count); i++) {
    var oLi = document.createElement("li");
    oLi.innerHTML = `<a class="pageBtn" >${i}</a>`;
    if (i == page) {
      oLi.classList.add("active");
    }
    oPagination.insertBefore(oLi, oPagination.lastElementChild);
  }
}
render();

//给分页加事件
oPagination.addEventListener("click", changePage);
function changePage() {
  if (event.target.className == "pageBtn") {
    // var aPageBtn = document.querySelectorAll(".pageBtn");
    // for (var i = 0; i < aPageBtn.length; i++) {
    //   aPageBtn[i].parentNode.classList.remove("active");
    // }
    // event.target.parentNode.classList.add("active");
    page = event.target.innerText;
    render();
  }
}
//上下页
oPrevBtn.addEventListener("click", prevFn);
oNextBtn.addEventListener("click", nextFn);
function prevFn() {
  //   alert(1);
  if (page > 1) {
    page--;
    // console.log(page);
    render();
  }
}

function nextFn() {
  if (page < Math.ceil(data.length / count)) {
    page++;
    render();
  }
}

//联动全选
//全选部分
var n = 0;
var oC = document.querySelector("#c1");
oC.addEventListener("click", chooseAll);
function chooseAll() {
  var aInp = oTBody.querySelectorAll(".c2");
  console.log(aInp);
  //   alert(1);
  if (oC.checked == true) {
    for (var i = 0; i < aInp.length; i++) {
      aInp[i].checked = true;
      console.log(aInp[i].checked);
    }
  } else {
    for (var i = 0; i < aInp.length; i++) {
      aInp[i].checked = false;
    }
    n = 0;
  }
}
//联动全选部分判断
var aInp = oTBody.querySelectorAll(".c2");
console.log(aInp);
//给所有c2加点击事件
for (var i = 0; i < aInp.length; i++) {
  aInp[i].onclick = function () {
    if (this.checked == true) {
      n++;
    } else {
      n--;
    }
    console.log(n);

    if (n == aInp.length) {
      oC.checked = true;
    } else {
      oC.checked = false;
    }
  };
}

//删除入库
oDelBtn.addEventListener("click", delFn);
function delFn() {
  var aInp = document.querySelectorAll(".c2");
  console.log(aInp);
  for (var i = 0; i < aInp.length; i++) {
    if (aInp[i].checked) {
      var id = aInp[i].parentNode.nextElementSibling.innerText;
      for (var j = 0; j < data.length; j++) {
        if (data[j].id == id) {
          data.splice(j, 1);
        }
      }
    }
  }
  render();
}
// oTBody.addEventListener("click", chooseFn);
// function chooseFn() {
//   if (event.target.className == "c2") {
//     var id = event.target.parentNode.nextElementSibling.innerText;
//   }
//   oDelBtn.addEventListener("click", delFn);
//   function delFn() {
//     for (var i = 0; i < data.length; i++) {
//       if (id == data[i].id) {
//         data.splice(i, 1);
//       }
//     }
//   }
//   render();
// }

//添加入库
oAddSaveBtn.addEventListener("click", addFn);
function addFn() {
  var addId = document.querySelector(".addId");
  var addReceiptNum = document.querySelector(".addReceiptNum");
  var addFileNum = document.querySelector(".addFileNum");
  var addBoxNum = document.querySelector(".addBoxNum");
  var addUser = document.querySelector(".addUser");
  var addTime = document.querySelector(".addTime");

  data.push({
    id: addId.value,
    receiptNum: addReceiptNum.value,
    fileNum: addFileNum.value,
    boxNum: addBoxNum.value,
    user: addUser.value,
    time: addTime.value,
  });
  addId.value = "";
  addReceiptNum.value = "";
  addFileNum.value = "";
  addBoxNum.value = "";
  addUser.value = "";
  addTime.value = "";
  render();
  $("#myModal").modal("hide");

  // alert(1);
}

// 左侧导航
// 有子菜单的项（包括菜单项和子菜单列表）                        一级菜单有子菜单的li标签
let subMenus = document.querySelectorAll(".menus-submenu");
// 菜单项X                                                    一级菜单里的a标签
let subMenusItems = document.querySelectorAll(".menus-submenu > .menus-item");
// 子菜单列表                                                 二级菜单ul
let subMenusList = document.querySelectorAll(".menus-submenu > .menus-list");
// 没有子菜单的项                                              一级菜单没有子菜单的li标签
let noSubMenusItems = document.querySelectorAll(".menus-nosubmenu");
// 当前展开的菜单项索引
let expandedIndex = 0;
// 当前选择的 子菜单项 的 父菜单项 索引
let selectedParentIndex = 0;
// 当前选择的子菜单项索引
let selectedSubIndex = 0;
// 当前选择的 没有子菜单的项 的索引
let selectedNoIndex = -1;

function closeExpanded(index) {
  // 关闭展开
  subMenus[index].classList.remove("expanded-list");
}
function clearSelected() {
  // 清除选中项
  // 选中项有子菜单时
  if (-1 != selectedParentIndex) {
    subMenusList[selectedParentIndex]
      .getElementsByTagName("li")
      [selectedSubIndex].classList.remove("selected-items");
    subMenus[selectedParentIndex].classList.remove("selected-items");
  }
  // 选中项没有子菜单时
  else {
    noSubMenusItems[selectedNoIndex].classList.remove("selected-items");
  }
}

function initListeners() {
  // 点击响应：菜单项展开
  for (let index = 0; index < subMenusItems.length; index++) {
    subMenusItems[index].addEventListener("click", function (e) {
      // 当前点击的没有展开 并且 存在展开的, 关闭当前展开的
      if (index != expandedIndex && -1 != expandedIndex) {
        closeExpanded(expandedIndex);
      }

      // 判断点击的是否已经展开
      if (!subMenus[index].classList.toggle("expanded-list")) {
        // 点击的就是展开的，关闭展开
        expandedIndex = -1;
        // 选中的项 是否是当前点击的子项
        if (index == selectedParentIndex) {
          subMenus[index].classList.add("selected-items");
        }
      } else {
        // 点击的是其他
        expandedIndex = index;
        // 选中的项 是否是当前点击的子项
        if (index == selectedParentIndex) {
          subMenus[selectedParentIndex].classList.remove("selected-items");
        } else if (-1 != selectedParentIndex) {
          subMenus[selectedParentIndex].classList.add("selected-items");
        }
      }
    });
  }
  // 点击响应：子菜单项选中
  for (let index = 0; index < subMenusList.length; index++) {
    let subMenuLi = subMenusList[index].getElementsByTagName("li");
    for (let j = 0; j < subMenuLi.length; j++) {
      subMenuLi[j].addEventListener("click", function (e) {
        if (!subMenuLi[j].classList.contains("selected-items")) {
          // 清除选择
          clearSelected();

          subMenuLi[j].classList.add("selected-items");
          selectedParentIndex = index;
          selectedSubIndex = j;
        }
      });
    }
  }
  // 点击响应：无二级菜单的菜单项选中
  for (let index = 0; index < noSubMenusItems.length; index++) {
    noSubMenusItems[index].addEventListener("click", function (e) {
      if (!this.classList.contains("selected-items")) {
        // 清除选择
        clearSelected();
        // 如果有展开，关闭展开
        if (
          -1 != expandedIndex &&
          subMenus[expandedIndex].classList.contains("expanded-list")
        ) {
          closeExpanded(expandedIndex);
        }
        this.classList.add("selected-items");
        selectedNoIndex = index;
        selectedParentIndex = -1;
      }
    });
  }
}

initListeners();
